<template>
  <div class="app-container">


    <!-- 查询条件开始 -->
    <el-row :gutter="12" style="margin-bottom:5px">
      <el-col :span="24">
        <el-card>
          <el-form :inline="true" label-width="68px">
            <el-form-item style="float:right">
              <el-button type="primary" icon="el-icon-plus" size="small" @click="upWeek()">上一周</el-button>
              <el-button type="success" icon="el-icon-s-operation" size="small" @click="currentWeek()">当前周
              </el-button>
              <el-button type="primary" icon="el-icon-plus" size="small" @click="nextWeek()">下一周</el-button>
              <el-button
                  type="primary"
                  size="small"

                  @click="chongzhi()">重置！！！</el-button>
<!--              v-has ="['admin','system:userInfo']"-->
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>


    <!-- 时间范围开始 -->
    <el-row :gutter="12" style="margin-bottom:5px">
      <el-col :span="24">
        <el-card>
          <div style="text-align:center">
            <span>{{ schedulingData?.startTimeThisWeek }}(周一)</span>-<span>{{
              schedulingData?.endTimeThisWeek
            }}(周日)</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 时间范围结束 -->

    <!-- 排班表格开始 -->
    <el-table v-loading="loading" :data="tableData" border :span-method="spanMethod">
      <el-table-column prop="userId" label="医生" align="center" :formatter="userFormatter"/>
      <el-table-column prop="deptId" label="科室" align="center" :formatter="deptFormatter" />
      <el-table-column prop="subsectionType" label="时间/日期" align="center" :formatter="subsectionTypeFormatter"/>
      <el-table-column prop="schedulingType[0]" :label="labelNames[0]" align="center"
                       :formatter="schedulingTypeDay1Formatter"/>
      <el-table-column prop="schedulingType[1]" :label="labelNames[1]" align="center"
                       :formatter="schedulingTypeDay2Formatter"/>
      <el-table-column prop="schedulingType[2]" :label="labelNames[2]" align="center"
                       :formatter="schedulingTypeDay3Formatter"/>
      <el-table-column prop="schedulingType[3]" :label="labelNames[3]" align="center"
                       :formatter="schedulingTypeDay4Formatter"/>
      <el-table-column prop="schedulingType[4]" :label="labelNames[4]" align="center"
                       :formatter="schedulingTypeDay5Formatter"/>
      <el-table-column prop="schedulingType[5]" :label="labelNames[5]" align="center"
                       :formatter="schedulingTypeDay6Formatter"/>
      <el-table-column prop="schedulingType[6]" :label="labelNames[6]" align="center"
                       :formatter="schedulingTypeDay7Formatter"/>
    </el-table>
    <!-- 排班表格结束 -->

  </div>

</template>

<script>
export default {
  name: "Myscheduling",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 科室数据
      deptOptions: [],
      // 用户数据
      userOptions: [],
      // 排班时间段字典
      subsectionTypeOptions: [],
      // 排班类型字典
      schedulingTypeOptions: [],
      queryParams: {
        dateRange: undefined,
        queryDate: undefined
      },
      dateRange: [],
      // 查询条件
      schedulingData: {
        startTimeThisWeek: undefined,
        endTimeThisWeek: undefined
      },
      // 排班表的数据--》表格需要的数据（医生、科室、时间/日期）   应该从后台查询
      tableData: [],
      // 表头数据--表格数据周一~周日
      labelNames: ['', '', '', '', '', '', ''],

      paramsDate:new Date()
    }
  },
  created() {
    this.init();
  },
  computed: {
    groupNum() { // 获取医生列表数组

    }
  },
  methods: {
    // 拿到当前周的开始和结束日期
    getCurrentWeekRange(){
      this.paramsDate= new Date()
      const now = new Date();
      const dayOfWeek = now.getDay();
      const startOfWeek = new Date(now);
      startOfWeek.setDate(now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1));
      const endOfWeek = new Date(startOfWeek);
      endOfWeek.setDate(startOfWeek.getDate() + 6);
      let RangeDate;
      return RangeDate=[this.formatDate(startOfWeek), this.formatDate(endOfWeek)]
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },



    init() {
      // 查询科室
      this.$http.get("/hisRemoteDictData/getAllDept").then(res=>{
        //console.log(res.data.data)
        this.deptOptions = res.data.data
      })
      // 查询要排班的医生
      this.$http.get("/hisRemoteDictData/getAllSchedulingDoctor").then(res=>{
        //console.log(res.data.data)
        this.userOptions = res.data.data
      })
      // 查询排班时间段
      this.$http.get("/hisRemoteDictData/queryByDictType/his_subsection_type").then(res=>{
        // console.log(res.data.data)
        this.subsectionTypeOptions = res.data
      })
      // 查询班类型
      this.$http.get("/hisRemoteDictData/queryByDictType/his_scheduling_type").then(res=>{
        // console.log(res.data.data)
        this.schedulingTypeOptions = res.data
      })
      // 查询排班数据  返回值要填充schedulingData tableData labelNames
      this.listScheduling()
    },
    // 翻译科室
    deptFormatter(row) {
      let name = ''
      this.deptOptions.filter(item => {
        if (parseInt(row.deptId) === parseInt(item.deptId)) {
          name = item.deptName
        }
      })
      return name
    },
    // 翻译医生（用户）
    userFormatter(row) {
      console.log(row)
      let name = "未知";
      this.userOptions.forEach(item => {

        if (parseInt(item.userId) === parseInt(row.userId)) {
          name = item.userName
        }
      })
      return name;
    },
    // 翻译排班时段
    subsectionTypeFormatter(row) {
      let subsectionTypeLabel;
      this.subsectionTypeOptions.forEach(item => {
        if (parseInt(item.dictValue) === parseInt(row.subsectionType)) {
          subsectionTypeLabel = item.dictLabel
        }
      })
      return subsectionTypeLabel;
    },
    selectDictLabel(data, value){
      let result;
      data.forEach(function(item){
        if (parseInt(item.dictValue) === parseInt(value)) {
          result =  item.dictLabel;
        }
      })
      return result;
    },

    // 翻译周一排班类型
    schedulingTypeDay1Formatter(row) {
      return this.selectDictLabel(this.schedulingTypeOptions, row.schedulingType[0])

    },
    // 翻译周一排班类型
    schedulingTypeDay2Formatter(row) {
      return this.selectDictLabel(this.schedulingTypeOptions, row.schedulingType[1])
    },
    // 翻译周二排班类型
    schedulingTypeDay3Formatter(row) {
      return this.selectDictLabel(this.schedulingTypeOptions, row.schedulingType[2])
    },
    // 翻译周三排班类型
    schedulingTypeDay4Formatter(row) {
      return this.selectDictLabel(this.schedulingTypeOptions, row.schedulingType[3])

    },
    // 翻译周四排班类型
    schedulingTypeDay5Formatter(row) {
      return this.selectDictLabel(this.schedulingTypeOptions, row.schedulingType[4])

    },
    // 翻译周五排班类型
    schedulingTypeDay6Formatter(row) {
      return this.selectDictLabel(this.schedulingTypeOptions, row.schedulingType[5])

    },
    // 翻译周六排班类型
    schedulingTypeDay7Formatter(row) {
      return this.selectDictLabel(this.schedulingTypeOptions, row.schedulingType[6])
    },


    // 查询排班数据  返回值要填充schedulingData tableData labelNames
    listScheduling() {
      this.loading = true
      if (this.dateRange.length===0){
        this.currentWeek()
      }
      // 调用API       查询自己的排班数据
      this.$http.post("/hisScheduling/getAllScheduling/"+this.dateRange).then(res => {
        // this.labelNames = res.data.labelNames
        this.tableData = res.data.data
        // console.log(this.tableData)
        // this.schedulingData.startTimeThisWeek = res.data.beginDate
        // this.schedulingData.endTimeThisWeek = res.data.endDate
        this.loading = false
      })
    },
    // 上一周
    upWeek() {
      this.paramsDate = new Date(this.paramsDate.setDate(this.paramsDate.getDate() - 7))
      this.dateRange = this.getWeekRange(this.paramsDate);
      this.listScheduling()
    },
// 当前周
    currentWeek() {
      this.paramsDate = new Date()
      this.dateRange = this.getWeekRange(this.paramsDate);
      this.listScheduling()
    },
// 下一周
    nextWeek() {
      this.paramsDate = new Date(this.paramsDate.setDate(this.paramsDate.getDate() + 7))
      this.dateRange = this.getWeekRange(this.paramsDate);
      this.listScheduling()
    },

    getWeekRange(date) {
      // 获取指定日期所在周的周一和周日
      const day = date.getDay();
      const diffToMonday = day === 0 ? -6 : 1 - day;
      const monday = new Date(date);
      monday.setDate(date.getDate() + diffToMonday);
      const sunday = new Date(monday);
      sunday.setDate(monday.getDate() + 6);
      const weekDates = [];
      for (let i = 0; i < 7; i++) {
        const currentDay = new Date(monday);
        currentDay.setDate(monday.getDate() + i);
        weekDates.push(this.formatDateXq(currentDay));
      }
      this.labelNames = weekDates
      this.schedulingData.startTimeThisWeek = this.formatDate(monday)
      this.schedulingData.endTimeThisWeek = this.formatDate(sunday)
      return [this.formatDate(monday),this.formatDate(sunday)];

    },
    formatDateXq(date) {
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const weekday = date.getDay();
      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      return `${year}年${month}月${day}日${weekdays[weekday]}`;
    },


    // 合并行
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex >= 1 && rowIndex <= 3) {
        if (columnIndex === 0 || columnIndex === 1) {
          return [0, 0]; // Merges the cell with the above one
        }
      }
      if (rowIndex === 0 && (columnIndex === 0 || columnIndex === 1)) {
        return [3, 1]; // Merges 3 rows together for the first column
      }
    },
    // 重置查询条件
    chongzhi() {
      // this.queryParams = {};
      // this.loadTable();
      //页面刷新
      location.reload();
    },
  }
}
</script>

<style scoped>

</style>
